<template>
  <div class="single-bar" id="barchart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('barchart'));
       window.addEventListener('resize', () => {
        chart.resize();
      })

      const option = {
        tooltip: {},
        // legend: {
        //   data:['销量'],
        //   top: 10,
        //   right: 10,
        //   itemWidth: 10,
        //   itemHeight: 10,
        //   textStyle: {
        //     fontSize: 12
        //   }
        // },
        grid: {
          top: '10%',
          right: '5%',
          left: '5%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {
          name: '对比集团均值',
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: '{value} %'
          },
          itemStyle: {
            color: '#f5a623',
            fontSize: 14
          }
        },
        series: [{
          name: '销量',
          type: 'bar',
          barWidth: "20%",
          data: [5, 20, 36, 10, 10, 20]
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.single-bar {
  width: 50%;
  height: 100%;
}
  

  
</style>